<template>
  <el-form-item class="bonts">
    <el-select
      class="bontss"
      ref="select"
      v-model="datas"
      visible-change="true"
      popper-class="custom-header"
    >
      <el-option class="top">{{ null }} </el-option>
      <div class="sumbox">
        <div>
          <div class="top_left">
            <el-icon @click="page--"><Back :size="20" /></el-icon>年份<el-icon
              @click="page++"
              ><Right
            /></el-icon>
          </div>
          <div class="onew">
            <li
              @click="selectyear(year)"
              v-for="year in yearlist()"
              :key="year"
              :label="year"
              :value="year"
              :class="{
                lis: year === selectedYear,
              }"
            >
              {{ year }}
            </li>
          </div>
        </div>
        <div>
          <div class="top_right">月份</div>
          <div class="twon">
            <li
              v-for="month in months"
              :key="month"
              :label="month"
              :value="month"
              @click="selectmount(month)"
              :class="{
                lis: month === selectedMonth,
              }"
            >
              {{ month }}
            </li>
          </div>
        </div>
      </div>
      <div class="bottoms">
        <div class="bottoms_right">
          <button class="button" @click="clear">清除</button>
          <button class="button" @click="now">现在</button>
          <button class="button" @click="handleConfirm">确定</button>
          <button class="button" @click="kong">关闭</button>
        </div>
      </div>
    </el-select>
  </el-form-item>
</template>
  
  <script lang="ts" setup>
import { ref, watchEffect } from "vue";
import { Back, Right } from "@element-plus/icons-vue";
const selectedYear = ref("");
const selectedMonth = ref("");
const selectyear = (item: number) => {
  console.log(item);
  selectedYear.value = item;
};
const select = ref();
const selectmount = (item: string) => {
  console.log(item);
  selectedMonth.value = item;
};
const flag = ref(true);
const datas = ref("");
watchEffect(() => {
  datas.value = `${selectedYear.value}-${selectedMonth.value}`;
});
const clear = () => {
  selectedYear.value = "";
  selectedMonth.value = "";
  select.value.blur();
};
const kong=()=>{
  select.value.blur();
}
const now = () => {
  const date = new Date();
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  selectedYear.value = year;
  selectedMonth.value = month;
  select.value.blur();
};
const years = Array.from({ length: 100 }, (_, i) => 1988 + i);
const page = ref(1);
const pagesize = ref(12);
const yearlist = () => {
  return years.slice(
    (page.value - 1) * pagesize.value,
    page.value * pagesize.value
  );
};
function handleConfirm() {
  flag.value = false;
  select.value.blur();
}
const months = [
  "01",
  "02",
  "03",
  "04",
  "05",
  "06",
  "07",
  "08",
  "09",
  "10",
  "11",
  "12",
];
</script>
<style>
.top_left {
  font-size: 17px;
  text-align: center;
  background: rgb(221, 221, 221);
}
.top_right {
  font-size: 17px;
  text-align: center;
  background: rgb(221, 221, 221);
}

.bonts {
  width: 100px;
}
.onew {
  width: 100px;
  height: 200px;
  display: flex;

  flex-wrap: wrap;
  text-align: center;
  border-right: 1px solid #dcdfe6;
  padding-right: 10px;
}
.onew li {
  width: 50%;
  line-height: 30px;
  padding: 0;
}
.sumbox {
  display: flex;
  height: 200px;
}
.twon {
  width: 70px;
  height: 200px;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  border-right: 1px solid #dcdfe6;
  padding-right: 10px;
}
.bottoms {
  width: 100px;
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
  border-top: 1px solid #dcdfe6;
}
.twon li {
  width: 50%;
  padding: 0;
  line-height: 30px;
}
li {
  list-style: none;
}
.top {
  height: 0px;
}
.bottoms_right {
  margin-left: 50px;
  display: flex;
  width: 200px;
}
.lis {
  background: rgb(221, 221, 221);
}
li:hover {
  background: rgb(221, 221, 221);
  border-bottom: 1px solid #141415;
  cursor: pointer;
}
.button {
  text-align: right;
  width: 30px;
  text-align: center;
}
.bottoms_right li {
  padding: 0;
}
</style>